<template>
	<view class="vaccination-list">
		<view class="month-age">1月龄</view>
		<view class="vaccination-item" v-for="(item, index) in vaccinationList" :key="index">	
			<view class="vaccination-item-left" @click="tovaccination">
				<span class="vaccination-title">{{ item.title }}</span>&nbsp;&nbsp;
				<span class="vaccination-times">{{ item.times }}</span>
				<br>
				<text class="vaccination-intro">{{ item.intro }}</text>
			</view>
			<view class="vaccination-item-right">
				<button 
					class="sign-button" 
					:class="{ 'signed': item.isSigned }" 
					plain="true" 
					@click="markAsSigned(index)"
				>
					<text class="sign-vaccination">{{ item.isSigned ? '已接种' : '+ 标记接种' }}</text>
				</button>
			</view>	
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 疫苗接种列表数据
const vaccinationList = ref([
	{ title: '卡介苗', times: '第一次', intro: '预防结核病', isSigned: false },
	{ title: '卡介苗', times: '第二次', intro: '预防结核病', isSigned: false },
	{ title: '乙肝疫苗', times: '第一次', intro: '预防乙肝', isSigned: false },
	{ title: '乙肝疫苗', times: '第二次', intro: '预防乙肝', isSigned: false },
]);

// 跳转到疫苗接种详情页
const tovaccination = () => {
	uni.navigateTo({
		url: '/pages/vaccination/content/content'
	});
};

// 标记为已接种
const markAsSigned = (index) => {
	vaccinationList.value[index].isSigned = true;
};
</script>

<style scoped>
page {
	background-color: #f2f2f2;
}

.month-age {
	font-size: 30rpx;
	color: #666EE8;
	margin-left: 40rpx;
	padding-top: 30rpx;
	padding-bottom: 20rpx;
}

.vaccination-list {
	background-color: #fff;
	margin-top: 20rpx;
}

.vaccination-item {
	margin: 10rpx 40rpx;
	border-bottom: 4rpx solid #f2f2f2;
	display: flex;
	justify-content: space-between;
}

.vaccination-item-left {
	flex: 1;
}

.vaccination-times {
	color: #999999;
	font-size: 26rpx;
}

.vaccination-intro {
	font-size: 28rpx;
	line-height: 60rpx;
}

.vaccination-item-right {
	margin-top: 15rpx;
}

.sign-button {
	width: 180rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	color: #666EE8;
	border-color: #666EE8;
	margin: 0;
	padding: 0;
	text-align: center;
}

.sign-button.signed {
	color: #999999;
	border-color: #999999;
	background-color: #f2f2f2;
}

.sign-vaccination {
	font-size: 28rpx;
}
</style>
